/*
* be-header.vue
* @deprecated 公共的头部组件
* @author czh
* @create (czh 2021/5/18)
* @update (czh 2021/5/18)
*/
<template>
  <header class="be-header" :class='contextmenuCls' :style="{ height }">
    <slot></slot>
  </header>
</template>

<script>
export default {
  name: "be-header",
  data() {
    return {
      isScroll: true,
    }
  },
  props: {
    /**
     * 自定义主题
     */
    'theme': {
      type: String,
      default: 'violet'
    },
    /**
     * 高度
     */
    'height': {
      type: String,
      default: '60px'
    },
    /**
     * 自定义样式类
     */
    'customClass': {
      type: String,
      default: ''
    },
  },
  computed: {
    //主题内容class 设置
    contextmenuCls() {
      return [
        this.customClass,
        `be-header--${this.theme}`,
      ]
    },
  },
  watch: {},
  created() {
  },
  mounted() {
  },
  methods: {}
}
</script>

<style lang="scss">
.be-header {
  width: 100%;
  font-size: 12px;
  /* position: relative;
   top: 0;
   left: 0;
   right: 0;*/
  margin: auto;
  @include flex(center, center);
  z-index: 999;
  // min-width: 1280px;
  box-shadow: 0 0 8px rgba(0, 0, 0, .16);

  .text {
    text-align: center;
    @include text(12px, inherit, 22px, 400);
  }
}

.be-header--violet {
  background-color: $mainColor2;
  color: $textColor6;
}

.be-header--white {
  background-color: $mainColor7;
  color: $textColor5;
  box-shadow: 0px -2px 6px rgba(0, 0, 0, 0.16);
}
</style>